
import {defineComponent, ref, reactive, toRefs, watch, h, inject, onMounted, onBeforeMount} from 'vue'
import TimeComponent from '@/components/common/time/index.vue'
import SearchComponent from '@/components/common/search/index.vue'
import * as Data from './AppData'
import * as Types from "../../../../../types";
import { ExpandAltOutlined, FullscreenExitOutlined, DownOutlined } from '@vicons/antd'
import WallpaperContent from "@/components/content/wallpaper/index/index.vue";

export default defineComponent({
    components: {
        TimeComponent, SearchComponent,
        ExpandAltOutlined, FullscreenExitOutlined, DownOutlined
    },
    setup() {
        const state = reactive({
            list: ref<Types.Ap[] | any>(null),
            cardWidth: 0,
            cardHeight: 0,
            showModal: false,
            app: { id: 0, name: '',component: null, icon: '',size:0},
        })
        const methods = {
            changeBackground(val:string='rgb(233,236,239)', isImg:boolean=false) { //val 值 isImg 是否为图片
                const el = <HTMLElement>document.getElementById('desktop-content')
                if (isImg || val.indexOf('http') !== -1) {
                    el.style.setProperty('background-image', `url('${val}')`)
                } else el.style.setProperty('background-color', val)
            }
        }
        onBeforeMount(()=>{
            state.list = Data.list
        })
        onMounted(()=>{
            methods.changeBackground()
            // methods.changeBackground('https://www4.bing.com//th?id=OHR.IndigoBunting_ZH-CN3172415219_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp')

            const els = document.getElementsByClassName('app-card')
            const el = els[0]
            let elWidth: number = (el as HTMLDivElement).offsetWidth
            state.cardWidth = elWidth
            state.cardHeight = elWidth*0.618
        })
        return {
            ...toRefs(state),
            methods
        }
    }
})
